import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';

const modalRoot = document.getElementById('dialog-root');

class TechnologyCollegeNumChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('technologyCollegeNumChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 250,
    };
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    // echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData();
  }
  setChartData() {
    var placeHolderStyle = {
      normal: {
        label: {
          show: false,
          position: "center"
        },
        labelLine: {
          show: false
        },
        color: "#dedede",
        borderColor: "#dedede",
        borderWidth: 0
      },
      emphasis: {
        color: "#dedede",
        borderColor: "#dedede",
        borderWidth: 0
      }
    };


   const option = {
      color: ['#fc7a26', '#fff', '#ffa127', '#fff', "#ffcd26"],
      series: [
        {
          name: '值',
          type: 'pie',
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [109, 110],
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside'
              },
              labelLine: {
                show: true,
                length: 10,
                smooth: 0.5
              },
              borderWidth: 5,
              shadowBlur: 40,
              borderColor: "#fc7a26",
              shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
            }
          },
          data: [{
            value: 26,
            name: '长三角\n26所'
          }, {
            value: 69,
            name: '',
            itemStyle: placeHolderStyle
          }]
        },

        {
        name: '值',
        type: 'pie',
        clockWise: true, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [89, 90],
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'outside'
            },
            labelLine: {
              show: true,
              length: 30,
              smooth: 0.5
            },
            borderWidth: 5,
            shadowBlur: 40,
            borderColor: "#fc7a26",
            shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
          }
        },
        data: [{
          value: 13,
          name: '江苏\n13所'
        }, {
          value: 82,
          name: '',
          itemStyle: placeHolderStyle
        }]
      }, {
        name: '白',
        type: 'pie',
        clockWise: false,
        radius: [80, 80],
        hoverAnimation: false,
        data: [{
          value: 1
        }],itemStyle: {
          normal:{
            labelLine: {
              show: false
            },
          }
        }
      }, {
        name: '值',
        type: 'pie',
        clockWise: true,
        hoverAnimation: false,
        radius: [69, 70],
        itemStyle: {
          normal: {
            label: {
              show: true
            },
            labelLine: {
              show: true,
              length: 30,
              smooth: 0.5
            },
            borderWidth: 5,
            shadowBlur: 40,
            borderColor: "#ffa127",
            shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
          }
        },
        data: [{
          value: 26,
          name: '长三角'
        }, {
          value: 69,
          name: '',
          itemStyle: placeHolderStyle
        }]
      }, {
        name: '白',
        type: 'pie',
        clockWise: false,
        hoverAnimation: false,
        radius: [60, 60],
        data: [{
          value: 1
        }],
        itemStyle: {
          normal:{
            labelLine: {
              show: false
            },
          }
        }
      }, {
        name: '值',
        type: 'pie',
        clockWise: true,
        hoverAnimation: false,
        radius: [49, 50],
        itemStyle: {
          normal: {
            label: {
              show: true
            },
            labelLine: {
              show: true,
              length: 50,
              smooth: 0.5
            },
            borderWidth: 5,
            shadowBlur: 40,
            borderColor: "#ffcd26",
            shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
          }
        },
        data: [{
          value: 4,
          name: '40%'
        }, {
          value: 6,
          name: '',
          itemStyle: placeHolderStyle
        }]
      }, {
        type: 'pie',
        color: ['#fc7a26', '#ffa127', "#ffcd26"],
        data: [{
          value: '',
          name: ''
        }, {
          value: '',
          name: ''
        }, {
          value: '',
          name: ''
        }]
      }, {
        name: '白',
        type: 'pie',
        clockWise: true,
        hoverAnimation: false,
        radius: [50, 50],
        label: {
          normal: {
            position: 'center'
          }
        },
        data: [{
          value: 1,
          label: {
            normal: {
              formatter: '全国双一流学科',
              textStyle: {
                color: '#fff',
                fontSize: 11
              }
            }
          }
        },  {
          tooltip: {
            show: false
          },
          label: {
            normal: {
              formatter: '\n建设大学',
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            }
          }
        },{
          tooltip: {
            show: false
          },
          label: {
            normal: {
              formatter: '\n95',
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            }
          }
        }]
      }]
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `双一流大学数`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                // theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default TechnologyCollegeNumChart;
